<template>
    <div class="ut-box">
        <div class="ut-item">
            <span>选择上传环境</span>
            <select class="env-select" @change="envChange">
                <option v-for="(item, index) in envArray" :key="index">{{item}}</option>
            </select>
        </div>
        <div class="ut-item">
            <span>设置上传时间</span>
            <input type="date" v-model="currentDate">
            <input type="text" v-model="currentTime"/>
        </div>
        <div class="ut-item">
            <span>输入模板信息</span>
            <input type="text" placeholder="模板标题" v-model="templateTitle">
            <input type="text" placeholder="模板描述" v-model="templateDescription"/>
        </div>
        <div class="ut-item">
            <span>输入模板字符串</span>
            <div class="ut-template-box">
                <textarea class="ut-textarea" v-model="template" placeholder="输入模板字符串"></textarea>
                <!-- 操作按钮 -->
                <div class="ut-btn-box">
                    <div @click="changeNewStr">转为新格式</div>
                    <div>转为老格式</div>
                </div>
                
            </div>
        </div>
        <div class="ut-item">
            <span>输入接口所需参数</span>
            <input type="text" placeholder="输入sessionId" v-model="sessionId">
            <input type="text" placeholder="输入门店code" v-model="storeCode">
        </div>
        <div class="ut-item">
            <span></span>
            <div class="ut-template-box">
                <!-- 操作按钮 -->
                <div class="ut-btn-box">
                    <div @click="upload">上传</div>
                    <div @click="cancel">取消上传</div>
                </div>
                
            </div>
        </div>
        
    </div>
</template>
<script>
let _currentDate = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`;
let _currentTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
import {template_add} from "../../api/gw/index.js";
import axios from "axios";
import getData from "./helper";
export default {
    data() {
        return {
            envArray: ["测试环境", "预发布环境", "生产环境"],
            envInfo: {
                "测试环境": {
                    baseUrl: "https://test-vmbase.scn.weilian.cn",
                    enterpriseCode: "NJXS"
                },
                "预发布环境": {
                    baseUrl: "https://pre-vmbase.scn.weilian.cn",
                    enterpriseCode: "NINGJIAXIANSHENG"
                },
                "生产环境": {
                    baseUrl: "https://vmbase.scn.weilian.cn",
                    enterpriseCode: "NINGJIAXIANSHENG"
                }
            },
            currentDate: _currentDate,
            currentTime: _currentTime,
            templateTitle: "",
            templateDescription: "",
            template: "",
            sessionId: "",
            storeCode: "",
            env: "测试环境",
        }
    },
    methods: {
        envChange(e) {
            // console.log(e);
            this.env = this.envArray[e.target.selectedIndex];
            // console.log(this.env);
        },
        //老模板格式转为新的
        changeNewStr() {
            if (!this.template) return alert("请输入模板字符串");
        },
        //取消发布，只作用于定时发布状态下
        cancel() {
            clearTimeout(this.timer);
            this.timer = null;
            console.log("取消发布成功");
        },
        //发起请求
        async request() {
            // let p = await getData();
            // console.log("打印获取的参数", p);
            // return;
            let enterpriseCode = this.envInfo[this.env].enterpriseCode;
            let url = this.envInfo[this.env].baseUrl + template_add;
            // let sessionId = p.sessionId;
            let params = {
                enterpriseCode,
                storeCode: this.storeCode,
                tpName: this.templateTitle,
                tpDesc: this.templateDescription,
                tpConfig: this.template,
                tpState: 0,//未启用状态
            }
            // params = Object.assign(params, p);
            // delete params.sessionId;

            let options = {
                method: "post",
                data: params,
                url,
                headers: {sessionId: this.sessionId}
            }
            console.log("打印请求参数", options);
            // return;
            return axios(options);
        },
        //立即上传
        async uploadImmediately() {
            let result = await this.request();
            console.log("打印上传结果", result);
        },
        //延时上传
        uploadDelay(timeSet) {
            console.log(`${timeSet / 1000 / 60}分钟后开始上传`);
            this.timer = setTimeout(() => {
                this.uploadImmediately();
            }, timeSet);
        },
        //上传模板
        upload() {
            // return getData();
            if (
                !this.currentTime || 
                !this.template || 
                !this.sessionId || 
                !this.templateTitle ||
                !this.templateDescription ||
                !this.env ||
                !this.storeCode
            ) {
                return alert("参数没有填写完整");
            }
            //判断一下时间
            let timeStr = `${this.currentDate} ${this.currentTime}`;
            let timeSet = new Date(`${this.currentDate} ${this.currentTime}`).getTime();
            let timeNow = new Date().getTime();
            // console.log("timeStr", timeStr);
            // console.log("timeSet", timeSet);
            // console.log("timeNow", timeNow);
            
            // return;
            //设置的时间小于等于当前时间，立即上传
            if (timeSet <= timeNow) {
                console.log("立即上传"); 
                //立即上传
                this.uploadImmediately();
            } else {
                this.uploadDelay(timeSet - timeNow);
            }
        }
    },
    created() {
        console.log("_currentDate", _currentDate);
    }
}
</script>
<style>
    .ut-box {
        margin: 30px 20px;
        border: 1px solid #444;
        padding: 10px;
    }
    .ut-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .env-select {
        width: 200px;
        height: 30px;
        border-radius: 3px;
        border: 1px solid #ddd;
        margin-left: 10px;

    }
    .ut-template-box {
        margin-left: 10px;
    }
    .ut-btn-box {
        display: flex;
        margin-top: 10px;
    }
    .ut-btn-box>div {
        padding: 3px 10px;
        background: #3876af;
        font-size: 14px;
        border-radius: 3px;
        margin-right: 10px;
        color: white;
    }
    .ut-btn-box>div:first-of-type {

    }
    .ut-textarea {
        width: 410px;
        border: 1px solid #ddd;
        min-height: 400px;
    }
    .ut-item span {
        width: 150px;
        flex-shrink: 0;
        display: flex;
    }
    .ut-item input {
        width: 200px;
        height: 30px;
        border-radius: 3px;
        border: 1px solid #ddd;
        margin-left: 10px;
    }
</style>

